<template>
	<view class="box">
		<view class="tou top fixed" :style="'padding-top:' + statusBarHeight1 + 'px'">
			<image @click="fanhui" class="image1" src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png" />
			<!-- #ifndef MP-WEIXIN -->
			车源信息
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<text @click="fanhui" style="position: absolute;left:50%;transform: translateX(-50%);">车源信息</text>
			<!-- #endif -->
			<image @click="sousuo" class="image2" :style="paddingR" src="https://pic.bangbangtongcheng.com/static/sousuo.png"
				mode="widthFix" />
		</view>
		<view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'"></view>
		<view class="bannerBox" :class="scrollTop != 0 ? 'Ptop' : ''">
			<view class="banner">
				<swiper style="min-height: 0rpx; height: 345rpx" class="screen-swiper square-dot" :indicator-dots="true"
					:circular="true" :autoplay="true" indicator-active-color="#ffffff" interval="5000" duration="500">
					<swiper-item v-for="(item, index) in bannerList" :key="index" @click="bannerD(item.id)">
						<image :src="imgUrl + item.picturePath" mode="aspectFill" />
						<view class="byTitle"><span>{{item.title}}</span></view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="cu-list grid col-3 no-border"
			style="margin-left: 30rpx; width: 690rpx; margin-top: 20rpx;justify-content: space-around;">
			<view class="cu-item" @click="tiaozhuan(1)">
				<view class="img" style="display: flex;align-items: center;justify-content: center;">
					<image style="width: 100%;height: 100%;"
						src="https://pic.bangbangtongcheng.com/static/bbcz/esc01.png" />
				</view>
				<text style="font-size: 30rpx; color: #333333">二手车</text>
			</view>
			<view class="cu-item" @click="tiaozhuan(2)">
				<view class="img" style="display: flex;align-items: center;justify-content: center;">
					<image style="width: 100%;height:100%;"
						src="https://pic.bangbangtongcheng.com/static/bbcz/ddxc01.png" />
				</view>
				<text style="font-size: 30rpx; color: #333333">到店新车</text>
			</view>
			<view class="cu-item" @click="tiaozhuan(3)">
				<view class="img" style="display: flex;align-items: center;justify-content: center;">
					<image style="width: 100%;height:100%;"
						src="https://pic.bangbangtongcheng.com/static/bbcz/zscx01.png" />
				</view>
				<text style="font-size: 30rpx; color: #333333">在售车系</text>
			</view>
		</view>
		<view class="list">
			<view class="tit">推荐车源</view>
			<view class="liss" v-for="(item, index) in Recommend" :key="index" @click="details(item)">
				<image mode="aspectFit" :src="item.vehicleCoverPicture" />
				<view class="li_2" style="max-width: 336rpx">
					<view class="vehicleRecom">
						<span class="tagLabel">{{item.vehicleType==1?'到店新车':(item.vehicleType==2?'二手车':'在售车系')}}</span>
						<text>{{item.title}}</text>
						<!-- <span v-if="item.vehicleType==2">{{item.vehicleBrandModel.split('|')[0] + ' '}} {{item.vehicleBrandModel.split('|')[1]?item.vehicleBrandModel.split('|')[1] + "/":"/"}} {{item.mileage<10000?item.mileage+"公里/":(item.mileage/10000).toFixed(1)+"万公里/"}} {{item.licensingTimeYear}}</span>
						<span v-else>{{item.vehicleBrandModel.split('|')[0] + ' '}} {{item.vehicleBrandModel.split('|')[1]?item.vehicleBrandModel.split('|')[1] + "/":"/"}} {{item.model?item.model+'/':""}} {{item.bodyStructureDoors+"门"+item.bodyStructureSeat+"座"+item.bodyStructureVehicle+"车"}}</span> -->
					</view>
					<view class="price" v-if="item.vehicleType==3">
						{{item.intervalPrice}}{{ item.intervalPrice && item.intervalPrice.indexOf('万')>=0 ? '' : '万' }}
					</view>
					<view class="price" v-else>
						{{item.price}}万
					</view>
				</view>
			</view>
			<view v-if="Recommend.length == 0" class="none">
			  <image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
			  <view>没有更多数据了</view>
			</view>
			<view class="down" v-show="Recommend.length != 0 && !downStatus">没有更多了</view>
		</view>
		<view v-if="scrollTop>0" class="hui" @click="totop">
			<image src="https://pic.bangbangtongcheng.com/static/top.png" />返回顶部
		</view>
		<view class="zbc" v-if="zbc">
			<view class="tan">
				<view class="text">商家已将您标记为离职，是否同意？</view>
				<view class="xiao">稍后</view>
				<view class="tong">同意</view>
				<view class="guan" @click="guan">×</view>
			</view>
		</view>
		<uniBall></uniBall>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	let statusBarHeight;
	//#ifdef H5
	import wxshare from "../../utils/index.js";
	statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44;
	//#endif
	// #ifdef APP-PLUS
	statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10 + 44;
	//  #endif
	// #ifdef MP-WEIXIN
	statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 5 + 88;
	//  #endif
	import Tabbar from "@/components/tabbar.vue";
	export default {
		data() {
			const pr = this.$menuBtnInfo.pr ? `right: ${this.$menuBtnInfo.pr + 5}px` : '';
			return {
				paddingR: pr,
				statusBarHeight,
				zbc: false,
				bannerList: [],
				pageSize: 10,
				pageNo: 1,
				Recommend: [],
				imgUrl: this.$imgSrc,
				scrollTop: "0",
				trigger: false,
				downStatus: true,
				upStatus: true,
				userInfo: uni.getStorageSync("Pduser"),
			};
		},
		components: {
			"view-tabbar": Tabbar
		},
		computed: {
			...mapGetters(["statusBarHeight1", "userinfo"])
		},
		onShow() {
		  this.userInfo = uni.getStorageSync("Pduser");
		},
		onLoad(options) {
			this.getBanner();
			this.getRecommend();
			/* #ifdef H5 */
			this.jinzhi();
			/* #endif */
		},
		filters: {
			nums(val) {
				return val.toFixed(2);
			}
		},

		onPageScroll: function(Object) {
			// console.log(Object.scrollTop); //实时获取到滚动的值
			this.scrollTop = Object.scrollTop;
		},
		async onPullDownRefresh() {
			this.Recommend = [];
			this.pageNo = 1;
			this.downStatus = true;
			if (this.upStatus) {
				this.trigger = true;
				await this.getRecommend();
			}
		},
		onReachBottom() {
			this.down();
		},
		methods: {
			sousuo() {
				// if (!this.userinfo.phone) {
				// 	uni.showToast({
				// 		title: "请登录",
				// 		icon: "none",
				// 		mask: true
				// 	});
				// 	return;
				// }
				uni.navigateTo({
					url: "/pages_owner/release/searchPage?searchType=3"
				});
			},
			// 轮播图跳转
			bannerD(id) {
				uni.navigateTo({
					url: "/pages/index/bannerData?id=" + id
				});
			},
			jinzhi() {
				let _this = this;
				let param = window.location.href.split("#")[0];
				uni.request({
					method: "post",
					data: {
						url: param
					},
					header: {
						"content-type": "application/x-www-form-urlencoded"
					},
					url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
					success(re) {
						_this.jinzhifx(re.data);
					}
				});
			},
			jinzhifx(data) {
				wxshare.config({
					debug: false, //是否打开调试
					appId: data.appId, // 公众号的唯一标识
					timestamp: data.timestamp, // 生成签名的时间戳
					nonceStr: data.nonce, // ，生成签名的随机串
					signature: data.signature, // 签名
					jsApiList: ["hideMenuItems"]
				});
				// 禁止分享
				wxshare.hideMenuItems({
					// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
					menuList: [
						"menuItem:share:appMessage",
						"menuItem:share:timeline",
						"menuItem:share:timeline",
						"menuItem:share:qq",
						"menuItem:favorite",
						"menuItem:share:QZone",
						"menuItem:openWithSafari"
					]
				});
			},
			guan() {
				this.zbc = false;
			},
			totop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 300
				});
			},
			down() {
				if (this.downStatus) {
					this.pageNo++;
					this.getRecommend();
				}
			},
			async up() {},
			getRecommend() {
				this.upStatus = false;
				this.$myRequest
					.get("/api/mobile/vehicleOwner/getVehicleSource", {
						pageSize: this.pageSize,
						pageNo: this.pageNo,
						userId:this.userInfo.id
					})
					.then(res => {
						if (!res.vehicleSourceList.pageList.length) {
							this.downStatus = false;
						}
						if (res.vehicleSourceList.pageCount < this.pageNo * this.pageSize) {
							this.downStatus = false;
						}
						this.upStatus = true;
						this.trigger = false;
						this.Recommend = this.Recommend.concat(res.vehicleSourceList.pageList);
						uni.stopPullDownRefresh();
					});
			},
			getBanner() {
				this.$myRequest
				.get("/api/mobile/vehicleOwner/getCarouselChartsByType", {
					carouselType:"1",
					type: "3"
				})
				.then(res => {
					this.bannerList = res.carouselChartsList.pageList;
				});
			},
			tiaozhuan(num) {
				if (num == 1) {
					uni.navigateTo({
						url: "/pages_owner/carSource/usedCar"
					});
				} else if (num == 2) {
					uni.navigateTo({
						url: "/pages_owner/carSource/toStoreNewCar"
					});
				}else if (num == 3) {
					uni.navigateTo({
						url: "/pages_owner/carSource/salesDepartment"
					});
				}
			},
			fanhui() {
				uni.navigateBack({
					delta: 1
				});
			},
			details(item) {
				uni.navigateTo({
					url: "/pages_owner/index/vehicleDetails?id=" + item.id,
				});
			}
		}
	};
</script>

<style lang="less" scoped>
	.zbc {
		position: fixed;
		width: 100%;
		top: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 99999;

		.tan {
			position: absolute;
			width: 600rpx;
			height: 300rpx;
			background-color: #fff;
			border-radius: 10rpx;
			top: 34%;
			left: 75rpx;

			.text {
				width: 100%;
				text-align: center;
				margin-top: 80rpx;
				font-size: 34rpx;
			}

			.xiao {
				position: absolute;
				width: 160rpx;
				height: 60rpx;
				background: #ffffff;
				border: 2rpx solid #64b6a8;
				border-radius: 37rpx;
				left: 118rpx;
				bottom: 54rpx;
				text-align: center;
				line-height: 60rpx;
				color: #64b6a8;
			}

			.tong {
				position: absolute;
				width: 160rpx;
				height: 60rpx;
				background: #64b6a8;
				border-radius: 37rpx;
				right: 118rpx;
				bottom: 54rpx;
				text-align: center;
				line-height: 60rpx;
				color: #fff;
			}

			.guan {
				position: absolute;
				width: 58rpx;
				height: 58rpx;
				border: 4rpx solid #ffffff;
				border-radius: 50%;
				left: 50%;
				transform: translateX(-50%);
				bottom: -100rpx;
				text-align: center;
				line-height: 48rpx;
				color: #fff;
				font-size: 54rpx;
			}
		}
	}

	.box {
		width: 100%;
		padding-bottom: 0rpx;
		background-color: #fff;
	}

	.tou {
		position: relative;
		width: 100%;
		// height: 88rpx;
		text-align: center;
		/* #ifdef MP-WEIXIN */
		text-align: left;
		display: flex;
		align-items: center;
		/* #endif */
		line-height: 88rpx;
		font-size: 36rpx;
		color: #fff;
		background-color: #64b6a8;

		.image1 {
			position: absolute;
			width: 32rpx;
			height: 32rpx;
			// top: 116rpx;
			left: 30rpx;
		}

		.image2 {
			position: absolute;
			width: 56rpx;
			height: 56rpx;
			bottom: 16rpx !important;
			// top: 116rpx;
			right: 30rpx;
		}
	}

	.bannerBox {
		width: 100%;
		height: 400rpx;
		background: #64b6a8;
		padding-top: 28rpx;
		margin-top: -4rpx;

		.banner {
			margin-left: 30rpx;
			width: 690rpx;
			height: 346rpx;
			overflow: hidden;
			border-radius: 24rpx;

			.byTitle {
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				background-color: rgba(0, 0, 0, 0.1);

				span {
					width: 650rpx;
					padding: 0 20rpx;
					position: absolute;
					bottom: 46rpx;
					font-size: 34rpx;
					font-weight: 500;
					color: #FFFFFF;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
				}
			}
		}
	}
	.cu-item{
		width: 30% !important;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}
	.cu-item .img {
		width: 80rpx;
		height: 80rpx;
	}

	.cu-item text {
		font-size: 28rpx;
		color: #333333;
	}

	.Ptop {
		/* #ifdef H5 || APP-PULS */
		// padding-top: 104rpx;
		margin-top: 98rpx;
		/* #endif */

		/* #ifdef MP  */
		// margin-top: 188rpx;
		/* #endif */
	}

	.fixed {
		// display: flex;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 40;
	}

	.list {
		margin-top: 20rpx;
		margin-left: 30rpx;
		width: 720rpx;

		.tit {
			color: #333333;
			font-size: 36rpx;
			font-weight: 600;
			margin-bottom: 24rpx;
			margin-left: 20rpx;
		}

		.liss {
			width: 96%;
			padding-bottom: 30rpx;
			margin-bottom: 30rpx;
			border-bottom: 2rpx solid #e0e0e0;
			display: flex;
			// justify-content: space-between;

			image {
				background-color: #f8f8f8;
				width: 300rpx;
				height: 200rpx;
				border-radius: 20rpx;
			}

			.li_2 {
				margin-left: 24rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.vehicleRecom {
					font-size: 32rpx;
					font-weight: 600;
					color: #333333;
					line-height: 44rpx;

					.tagLabel{
						vertical-align: top;
						background: #64B6A8;
						color: #fff;
						font-size: 24rpx;
						text-align: center;
						width: 106rpx;
						margin-right: 10rpx;
						padding: 4rpx 6rpx;
						border-radius: 4rpx;
					}
				}

				.price {
					font-size: 38rpx;
					font-weight: 600;
					color: #E00000;
				}
			}
		}

		.li:last-child {
			border-bottom: 0rpx solid #e0e0e0;
		}
	}

	.hui {
		position: fixed;
		right: 30rpx;
		bottom: 154rpx;
		display: flex;
		align-items: center;
		padding: 10rpx 20rpx;
		background-color: #fff;
		border-radius: 34rpx;
		font-size: 26rpx;
		box-shadow: 0px 0px 36rpx rgba(0, 0, 0, 0.16);
		
		image {
			width: 46rpx;
			height: 46rpx;
			margin-right: 18rpx;
		}
	}

	.down {
		height: 60rpx;
		line-height: 60rpx;
		// border-top: 2rpx solid #d0d0d0;
		text-align: center;
	}
	.none {
	  text-align: center;
	
	  image {
	    width: 430rpx;
	    margin-bottom: 16rpx;
	  }
	
	  view {
	    height: 40rpx;
	    line-height: 40rpx;
	    color: #666;
	  }
	}
</style>
